<div class="warning">

    <table class="ui fixed celled table" *ngIf="getDataForCurrentPage().length > 0">
        <thead>
        <tr>
            <th>{{ 'warning_context' | translate }}</th>
            <th>{{ 'warning_element' | translate }}</th>
            <th class="eight wide">{{ 'warning_message' | translate }}</th>
            <th class="two wide right aligned">{{ 'warning_ignore' | translate }}</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let w of getDataForCurrentPage()" [class.ignored]="w.ignored">
            <td class="border">
                <ul>
                    <li *ngIf="!w.workflow_name && !w.application_name && !w.pipeline_name && !w.environment_name">{{ 'common_project_title' | translate }}{{project.name}}</li>
                    <li *ngIf="w.workflow_name">{{ 'common_workflow_title' | translate }}{{w.workflow_name}}</li>
                    <li *ngIf="w.application_name">{{ 'common_application_title' | translate }}{{w.application_name}}</li>
                    <li *ngIf="w.pipeline_name">{{ 'common_pipeline_title' | translate }}{{w.pipeline_name}}</li>
                    <li *ngIf="w.environment_name">{{ 'common_environment_title' | translate }}{{w.environment_name}}</li>
                </ul>
            </td>
            <td class="border">
                {{ w.element }}
            </td>
            <td class="border">
                {{ w.message }}
            </td>
            <td class="border right aligned">
                <button class="ui icon button" (click)="updateWarning(w)" [class.loading]="w.loading" [class.disabled]="w.loading">
                    <i class="undo icon" *ngIf="w.ignored"></i>
                    <i class="trash icon" *ngIf="!w.ignored"></i>
                </button>
            </td>
        </tr>
        </tbody>
        <tfoot *ngIf="getNbOfPages() > 1">
        <tr>
            <th colspan="4">
                <div class="ui right floated pagination menu" >
                    <a class="icon item" (click)="downPage()">
                        <i class="left chevron icon"></i>
                    </a>
                    <a class="item" *ngFor="let page of getNbOfPages() | ngForNumber" (click)="goTopage(page)" [class.active]="currentPage === page">{{page}}</a>
                    <a class="icon item" (click)="upPage()">
                        <i class="right chevron icon"></i>
                    </a>
                </div>
            </th>
        </tr>
        </tfoot>
    </table>
    <div class="ui info message" *ngIf="getDataForCurrentPage().length === 0">
        {{ 'warning_no' | translate }}
    </div>
</div>